<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.min.js"></script>
</head>
<body>
    <div class="container">
        <button>按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
    </div>
    <script>
    //   let btn1 =  document.querySelector("button");
    //   console.log(btn1);
    //     // 把原生对象通过jq方法包裹一下

    // //    console.log( $(btn1));  
    // $(btn1).css("background","red");
    // btn1.click(function(){
    //     console.log(1111);
    // })
    // btn1.css("color","red");

    // $("button").css()


    //    console.log(  $("button"));



        // $(".container button").click(function(){
        //     // console.log(11);
        //     // console.log(this);
        //     // let index = $(".container button").index($(this));
        //     // console.log(index);
        //     $(".container div").css("display","none").eq($(".container button").index($(this))).css("display","block");

        // })

        $(".container button").click(function(){$(".container div").css("display","none").eq($(".container button").index($(this))).css("display","block");})






    </script>
</body>
</html>